<template>
  <div class="create-layout">
    <!-- <div style="height:7%;width:100%;position:fixed;z-index:1;background:#f9f9f9;margin-top: -28px;display:flex;align-item:center;margin-left: -25px;" class="fin_header">
      <span v-if="!teamId">财务中心</span>
      <span v-else>财务中心<label style="font-size: 16px;margin-left:6px;font-weight: 400;">({{teamName}})</label></span>
    </div> -->
    <div class="header">
      <div class="header_span">
        <cell-header v-if="!teamId" :title="`财务中心`" :type="1"/>
        <div v-else style="display:flex;"><cell-header :title="`财务中心`" :type="1"/> <span style="margin-top: 3px;font-size:16px;margin-left:6px;">({{teamName}})</span></div>
      </div>
    </div>
    <!-- 绑定手机表单 -->
      <el-dialog title="绑定手机" :visible.sync="bindTelVisible" :close-on-click-modal="false" width="547px">
        <el-form :model="telForm" :rules="rulesTel" ref="telBindForm" label-width="80px" label-position="top">
          <el-form-item label="手机" class="code" prop="newAccount">
            <el-input v-model="telForm.newAccount" size="small" placeholder="11位手机号" style="margin-top:8px;">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" class="code" prop="newCode">
            <el-input v-model="telForm.newCode" placeholder="输入验证码" size="small" style="width: 42%;"></el-input>
            <el-button size="small" type="success"  :disabled="disabledNewShow" @click="getNewCode" style="margin-left: 10px;">{{codeTextNew}}</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="bindTelVisible = false">取 消</el-button>
          <el-button size="small" type="success" @click="bindToTel('telBindForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 消耗详情 -->
    <el-dialog title="消耗详情" :visible.sync="XHGLdialogVisible" width="800px">
      <xhDetail :id="id"></xhDetail>
    </el-dialog>
    <!-- 充值 -->
    <el-dialog
      title="充值"
      :visible.sync="CZdialogVisible"
      width="589px"
    >
      <el-form :model="czForm" label-position="top" :rules="rules" ref="czForm" label-width="80px">
        <el-form-item label="选择充值方式" class="bottom">
          <div class="apply">
            <img src="../../assets/images/create/alipay.svg" alt="">
            <i class="el-icon-success item-icon"></i>
            <!-- <el-radio v-model="czForm.value" border size="small"></el-radio> -->
          </div>
        </el-form-item>
        <el-form-item prop="recharge" label="充值金额" class="bottom">
          <el-input v-model.trim="czForm.recharge"  size="small" placeholder="请输入" @input="onToPlay('cz')" style="margin-top:5px">
            <template slot="append">{{ isSymol }}</template>
          </el-input>
           <p v-if="isSymol === '$' " style="font-size:12px;margin-top: -4px;height:25px;">目前汇率：$1.00 = ￥{{rate}}</p>
        </el-form-item>
        <!-- <p v-if="isSymol === '$' " style="margin-bottom:24px">目前汇率：$1 = ￥{{rate}}</p> -->
        <el-form-item label="应付金额">
           <label v-if="czForm.recharge && isSymol === '￥' " class="aply_money">￥ {{ (czForm.recharge*1).toFixed(2) }}</label>
           <label v-else-if="!czForm.recharge" class="aply_money">￥0.00</label>
           <label v-else class="aply_money_cz">￥{{onPlayMoney.toFixed(2)}}</label>
           <!-- <label v-else-if="czForm.recharge && isSymol === '$' && (czForm.recharge * rate).toString().split('.').length<3 ">￥ {{Number(czForm.recharge * rate).toFixed(2)}}</label>
           <label v-else>￥{{Math.ceil(Number(czForm.recharge * rate *100))/100}}</label> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer cz">
        <el-button class="cancel-btn" size="small" @click="CZdialogVisible = false">取 消</el-button>
        <el-button type="success" size="small" @click="onAlipay('czForm')" :disabled="isDisable">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 提现 -->
    <el-dialog
      title="提现"
      :visible.sync="TXdialogVisible"
      width="589px"
    >
      <el-form :rules="rules" ref="txForm" label-position="top" label-width="80px" :model="txForm">
        <el-form-item label="选择提现方式" class="bottom">
          <div class="apply">
            <img src="../../assets/images/create/alipay.svg" alt="">
             <i class="el-icon-success item-icon"></i>
            <!-- <el-radio v-model="czForm.value" border size="small"></el-radio> -->
          </div>
        </el-form-item>
        <em class="all_money" @click="allMoney">全部</em>
        <el-form-item prop="amount" label="提现金额" class="bottom">
           <el-input v-model.trim="txForm.amount" :placeholder="`可提现${isSymol}${this.money.balance}`" size="small" style="margin-top:5px;" @input="onToPlay('tx')">
            <template slot="append">{{ isSymol }}</template>
          </el-input>
          <p v-if="isSymol === '$' " style="font-size:12px;margin-top: -4px;height:25px;">目前汇率：$1.00 = ￥{{rate}}</p>
        </el-form-item>
        <!-- <p v-if="isSymol === '$' " style="margin-bottom:24px;font-size:12px;">目前汇率：$1 = ￥{{rate}}</p> -->
        <el-form-item label="实际到款">
           <label v-if="txForm.amount && isSymol === '￥' " class="aply_money">￥ {{ (txForm.amount *1).toFixed(2) }}</label>
           <label v-else-if="!txForm.amount" class="aply_money">￥0.00</label>
           <label v-else class="aply_money">￥{{onPlayMoney.toFixed(2)}}</label>
           <!-- <label v-else-if="txForm.amount && isSymol === '$' && ((txForm.amount * rate).toString().split('.').length<3)">￥ {{Number(txForm.amount * rate).toFixed(2)}}</label>
           <label v-else>￥{{Math.ceil(Number(txForm.amount * rate *100))/100}}</label> -->
        </el-form-item>
        <el-form-item prop="name" label="收款人（单位）名称" class="bottom" style="margin-top:50px;">
          <el-input size="small" v-model="txForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="account" label="支付宝账号" class="bottom">
          <el-input size="small" v-model="txForm.account" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="code" :label="'手机验证码（将发送至'+`${managerTel}`+'团队管理员）'" class="bottom">
          <div style="margin-bottom: 8px;">
          <el-input size="small" v-model="txForm.code" placeholder="输入团队管理员手机验证码"></el-input>
          <el-button type="success" :disabled="disableCode" size="small" style="margin-left:15px;" @click="getCode">{{ buttonTex }}</el-button>
        </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer tx_dialog">
        <el-button class="cancel-btn" size="small" @click="TXdialogVisible = false">取 消</el-button>
        <el-button size="small" type="success" @click="SureTx('txForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 支付成功或者失败 -->
     <el-dialog
      :title="orderInfo ? '支付成功':'支付失败'"
      :close-on-click-modal ="false"
      :visible.sync="zfdialogVisible"
      :before-close="handleClose"
      width="650px"
    >
    <payOrderInfo :order-info="orderInfo"></payOrderInfo>
    <span slot="footer" class="dialog-footer">
        <el-button size="small" type="success" @click="ZfSuccess">完成</el-button>
      </span>
     </el-dialog>
    <div style="height: 98%;position: relative;">
    <el-card
     style="margin-top:40px"
      v-loading="dataLog"
      element-loading-text="数据加载中,请稍后"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      shadow="never"
    >
    <cell-header :title="'团队财务概览'" style="padding-bottom: 24px" />
      <div class="card_header">
        <div class="header_div_one">
          <p class="title" style="margin-left:0px;display:flex;">
            <span>团队可用余额
            <el-tooltip class="item" effect="dark" content="可用余额：还没有分配在广告计划预算的金额；冻结余额：已经分配在广告计划的金额。" placement="right">
                  <span><i slot="reference" class="iconfont icon-question-circle icon_img" /></span>
               </el-tooltip>
            </span>
              <el-button v-if="isRoleName" type="success" size="small" class="cz_text" @click="CZDialog" style="">充值
              </el-button>
              <em v-if="isRoleName" class="tx_text" @click="TXDialog">提现</em>
          </p>
          <p class="ye_text" :style="isRoleName ? 'margin-top: 0px;margin-left:0px' : 'margin-top:10px;margin-left:0px'">
            <label>{{isSymol}}</label><countTo :start-val="0" :decimals="2" :end-val="(Number(money.balance)) || 0" :duration="200" class="num"></countTo>
          </p>
          <p class="end_text" style="margin-left:0px;">
            <!-- 可用余额
            <label class="end_text_label">{{isSymol}}</label>
              <countTo :start-val="0" :decimals="2" :end-val="money.balance" :duration="1500" style="margin-right:20px;margin-left:2px;color:#39444E;" class="num" ></countTo> -->
            冻结余额
            <label class="end_text_label">{{isSymol}}</label>
            <countTo :start-val="0" :decimals="2"  :end-val="money.orderBalance || 0" :duration="200" class="num" style="margin-right:20px;color:#39444E;margin-left:2px;"></countTo>
            预付税费
            <label class="end_text_label">{{isSymol}}</label>
            <countTo :start-val="0" :decimals="2"  :end-val="money.expenses_balance || 0" :duration="200" class="num" style="color:#39444E;margin-left:2px;"></countTo>
          </p>
        </div>
        <div class="header_div">
          <p class="title">昨日消耗</p>
          <p class="ye_text">
            <label>{{isSymol}}</label>
            <countTo :start-val="0" :decimals="2" :end-val="balanceofconsumption || 0" :duration="200"  class="num"></countTo>
          </p>
          <p class="end_text">
            <el-tooltip class="item" effect="dark" :content="content" placement="top">
              <span style="cursor: pointer;">环比</span>
            </el-tooltip>
            <label class="end_text_label" v-if="ybalanceofconsumption === 100" style="color: #E9716A;margin-left: 10px;">
              {{ ybalanceofconsumption+ '%'}}
              </label>
              <label class="end_text_label" v-else-if="ybalanceofconsumption !== 0" style="color: #24BEBE;margin-left: 10px;">
              {{ ybalanceofconsumption+ '%'}}
              </label>
            <i v-if="ybalanceofconsumption<0" class="el-icon-caret-bottom bottom " style="color: #24BEBE; margin-left: 10px;"/>
            <i v-if="ybalanceofconsumption===0" style="margin-left:10px;color:#39444E;">持平</i>
            <i v-if="ybalanceofconsumption>0" class="el-icon-caret-top top " style="color: #E9716A;margin-left: 10px;"/>
          </p>
        </div>
        <div class="header_div">
          <p class="title">累计消耗</p>
          <p class="ye_text">
            <label>{{isSymol}}</label>
            <countTo :start-val="0" :decimals="2" :end-val="balanceofconsumptions || 0" :duration="200" class="num"></countTo>
          </p>
          <p class="end_text">{{ balanceofconsumptionsData }}——至今</p>
        </div>
        <div class="header_div" style="border-right:none">
          <p class="title">累计充值</p>
          <p class="ye_text">
            <label>{{isSymol}}</label>
            <countTo :start-val="0" :decimals="2" :end-val="TotalAmount || 0" :duration="200" class="num"></countTo>
          </p>
          <p class="end_text">{{ TotalAmountData }}——至今</p>
        </div>
      </div>
    </el-card>
    <el-card v-if="glData.length>0" style="margin-top:20px;width:100%;" shadow="never">
      <cell-header v-if="glData.length>0" :title="'消耗概览'" style="padding-bottom: 24px" />
      <div class="xh_gl">
        <div v-for="(item,i) in glData" :key=i  class="xh_gl_div" @click="getFindUserUfconsumeDetails(item.campaign_id)">
          <p :class="i===0 ? 'xh_gl_name': 'xh_gl_name_next'">{{item.campaign_name}}</p>
          <p :class="i===0 ? 'xh_gl_number' : 'xh_gl_number_next'">{{item.rate}}%</p>
          <div :class="item.rate > 80 ?'xh_divder': 'xh_divder_lower'"></div>
          <p :class="i===0 ? 'xh_gl_progress' : 'xh_gl_progress_next'">
            <el-progress :percentage="item.rate" :show-text="false" stroke-width="8" :class="item.rate > 80?'process_up':'process_down'" style="width:220px">
          </el-progress></p>
          <div :class="item.rate > 80 ?'xh_divder': 'xh_divder_lower'"></div>
          <p :class="i===0 ?'xh_gl_money' :'xh_gl_money_next'">
            已消耗
            <label class="end_text_label">{{isSymol}}</label>
            <countTo :start-val="0" :decimals="2" :end-val="item.consumption || 0" :duration="200" style="margin-right:20px;margin-left:2px;color:#39444E;" class="num" ></countTo>
            <span style="margin-left: 10px">
              余额
              <label class="end_text_label">{{isSymol}}</label>
              <countTo :start-val="0" :decimals="2" :end-val="item.orderBalance || 0" :duration="200" style="margin-right:20px;margin-left:2px;color:#39444E;" class="num" ></countTo>
            </span>
          </p>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top:20px;margin-bottom: 40px;"  v-loading="loading"
      element-loading-text="数据加载中,请稍后"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      shadow="never">
      <div class="choose-time">
        <chooseTime @timeChange="timeChange"></chooseTime>
      </div>
      <div class="chart-display">
        <div class="chart-align" style=" border-right: 1px solid rgba(57, 68, 78, 0.1);height:350px;">
          <cell-header :title="'消耗趋势'" />
          <div v-if="qsXData.length > 0 && qsYData.length>0" class="left_div">
            <financeEchart :isSymol="isSymol" :qsXData="qsXData" :qsYData="qsYData"></financeEchart>
          </div>
          <div v-else class="no_data">暂无数据</div>
        </div>
        <div class="chart-align">
          <cell-header :title="'消耗占比'" style="padding-bottom: 24px;margin-left:40px" />
          <div v-if="xData.length>0" style="margin-top: 20px;">
            <xhEcharts :isSymol="isSymol" :zbName="zbName" :zbData="zbData" :xData="xData" :allNumber="allNumber"></xhEcharts>
          </div>
          <div v-else class="no_data">暂无数据</div>
        </div>
      </div>
      <div class="div_divider"></div>
       <div class="record">
          <cell-header
            :title="'财务记录'"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            style="padding-bottom: 24px"
          />
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="消耗" name="first">
              <xh :activeName="activeName" :timeArray="timeArray"></xh>
            </el-tab-pane>
            <el-tab-pane label="充值&提现" name="second">
              <cz :timeArray="timeArray"></cz>
            </el-tab-pane>
          </el-tabs>
      </div>
    </el-card>
  </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import cellHeader from '@/components/cell-header.vue'
import chooseTime from '../ad/overview/components/chooseTime/index'
import financeEchart from '@/components/charts/financeEchart.vue'
import xhEcharts from '@/components/charts/xhEcharts.vue'
import payOrderInfo from '@/components/payOrderInfo/index.vue'
import xhDetail from './xh_detail'
import xh from "./xh.vue"
import cz from './cz.vue'
import {
  freezeUblance,
  uTotalAmount,
  findSumUfc,
  findDayUfconsume,
  findOneUserUfconsume,
  campaignTotal,
  // trendSumUfc,
  campaignStatistics,
  alipay,
  txMoney,
  managerAccount,
  findExchangeRates,
  onPlay,
  generalView
} from '@/api/finace.js'
import {
  smsRegister,
  bindTelEmail
} from '@/api/user.js'
import {
  getOrderInfo // 查询订单信息
} from '@/api/create.js'
export default {
  components: {
    cellHeader,
    chooseTime,
    financeEchart,
    xhEcharts,
    countTo,
    payOrderInfo,
    xhDetail,
    xh,
    cz
  },
  data() {
    const rechargeValiate = (rule, value, callback) => {
      const reg = /^(([0-9])|([1-9]([0-9]+)))(.[0-9]+)?$/
      if(!value) {
        callback(new Error('请输入金额'))
      } else if (this.onPlayMoney > 100000) {
        callback(new Error('单笔充值不得超过100000.00元'))
      }else if(!reg.test(value)){
         callback(new Error('请输入数字'))
      } else {
        callback()
      }
    };
    const amountVali = (rule, value, callback) => {
      const reg = /^(([0-9])|([1-9]([0-9]+)))(.[0-9]+)?$/
      if(!value || !this.txForm.amount) {
        callback(new Error('请输入金额'))
      }  else if (this.onPlayMoney > 50000) {
        callback(new Error('单日提现限额不得超过50000.00元'))
      }else if(!reg.test(value)){
         callback(new Error('请输入数字'))
      } else {
        callback()
      }
    };

    const nameVali = (rule, value, callback) => {
      if(!value) {
        callback(new Error('请输入收款人（单位）名称'))
      } else {
        callback()
      }
    };
    const accountVali = (rule, value, callback) => {
      if(!value) {
        callback(new Error('请输入支付宝账号'))
      } else {
        callback()
      }
    };
    const codeVali = (rule, value, callback) => {
      if(!value) {
        callback(new Error('请输入手机验证码'))
      } else {
        callback()
      }
    };
     const validateTel2 = (rule, value, callback) => {
         let reg = /^1[3456789]\d{9}$/
      if (!value) {
        callback(new Error('请输入新手机号'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入有效手机号'))
      } else {
        callback()
      }
    };
    const validateCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入验证码'))
       } else {
          callback()
        }
      };
    return {
        rulesTel: {
        newAccount: [
          { validator: validateTel2, trigger: 'blur' }
        ],
        newCode: [
          { validator: validateCode, trigger: 'blur' }
        ]
      },
      rules:{
        // value: [{validator: valueValiate, trigger: 'blur'}],
        recharge: [{validator: rechargeValiate, trigger: 'blur'}],
        amount: [{validator: amountVali, trigger: this.allMoney?'change':'blur'}],
        name: [{validator: nameVali, trigger: 'blur'}],
        account: [{validator: accountVali, trigger: 'blur'}],
        code: [{validator: codeVali, trigger: 'blur'}]
      },
      czForm: {
        recharge: '',
        value: ''
      },
      activeName: "first",
      txForm: {
        value: '',
        amount: '',
        name: '',
        account: '',
        code: ''
      },
      isDisable: false,
      disableCode: false,
      buttonTex: '获取验证码',
      timeYz: 60,
      orderInfo: '',
      list: null,
      listLoading: true,
      CZdialogVisible: false,
      TXdialogVisible: false,
      zfdialogVisible: false,
      bindTelVisible: false,
      disabledNewShow: false,
      codeTextNew: '获取验证码',
      timeText: 60,
      telForm: {
        newAccount: '',
        oldCode: '',
        oldAccount: '',
        newCode: ''
      },
      czForm: {},
      money: '',
      xData: [],
      TotalAmount: '',
      TotalAmountData: '',
      balanceofconsumption: '',
      balanceofconsumptions: '',
      balanceofconsumptionsData: '',
      ybalanceofconsumption: '',
      timeArray: '',
      zbName: [],
      zbData: [],
      qsXData: [],
      qsYData: [],
      managerTel: '',
      rate: '',
      onPlayMoney: '',
      allNumber: 0,
      glData: '',
      id: '',
      XHGLdialogVisible: false
    }
  },
  computed: {
    teamName() {
      return this.$store.state.team.teamName
    },
    teamId() {
      return this.$store.state.team.teamId
    },
    isSymol() {
      return this.$store.state.user.unit === 'USD' ? '$' : '￥'
    },
    isType() {
      return this.$store.state.user.unit
    },
    loading() {
      return (this.xData && this.qsXData  && this.qsYData ) ? false : true
    },
    dataLog() {
      return (this.money || this.TotalAmount) ? false : true
    },
    screenWidth() {
      return document.body.clientWidth
    },
    getData() {
      let dd = new Date();
      dd.setDate(dd.getDate()-2);//获取AddDayCount天后的日期
      let y = dd.getFullYear();
      let m = dd.getMonth()+1;//获取当前月份的日期
      let d = dd.getDate();
      return y+"-"+m+"-"+d;
    },
    getDataDay() {
      let week = new Date().getDay() - 2
      let str = "星期"
      switch (week) {
        case 0 :
          str += "日";
          break;
        case 1 :
          str += "一";
          break;
        case 2 :
          str += "二";
          break;
        case 3 :
          str += "三";
          break;
        case 4 :
          str += "四";
          break;
        case 5 :
          str += "五";
          break;
        case 6 :
          str += "六";
          break;
      }
      return str
    },
    content() {
      if (this.ybalanceofconsumption < 0) {
        return '昨日对比'+ this.getData + '(' + this.getDataDay + ')' + '下降' + this.ybalanceofconsumption +'%'
      } else if (this.ybalanceofconsumption > 0) {
        return '昨日对比'+ this.getData + '(' + this.getDataDay + ')' + '上升' + this.ybalanceofconsumption +'%'
      } else {
        return '昨日对比'+ this.getData + '(' + this.getDataDay + ')' + '持平' + this.ybalanceofconsumption +'%'
      }
    },
    isRoleName(){
    //  let data =  this.$store.state.team.teamData? this.$store.state.team.teamData.roleName: ''
      let data = this.$store.state.user.userInfo.roleName
     if (data === 'visitor' || data === 'admin') return true
     else return false
    }
  },
 watch: {
    timeArray: {
      // immediate: true,
      // deep: true,
      handler:function(newV,oldV){
        this.timeArray = newV
        this.getCampaignStatistics(newV)
        this.getCampaignTotal()
      }
    },
    isSymol: {
      immediate: true,
      deep: true,
      handler:function(newV,oldV){
        return newV
      }
    },
    isType:{
      // immediate: true,
      // deep: true,
      handler:function(newV,oldV){
        this.getFreezeUblance()
        this.getuTotalAmount()
        this.getFindSumUfc()
        this.getFindDayUfconsume()
        this.getFindOneUserUfconsume()
        this.getManagerAccount()
        this.getFindExchangeRatese()
        this.getGeneralView()
        this.getCampaignTotal()
      }
    },
    screenWidth:{
      immediate: true,
      deep: true,
      handler: function(newval) {
        return newval
      }
    },
    isRoleName: {
      handler(newV) {
        this.isRoleName = newV
      }
    },
    teamId: {
      deep: true,
      handler: function(newV,oldV) {
        this.teamId = newV
        if(this.$route.query.recharge && this.$route.query.TradeNo) {
          this.getOrderInfo()
        }
        this.getFreezeUblance()
        this.getuTotalAmount()
        this.getFindSumUfc()
        this.getFindDayUfconsume()
        this.getFindOneUserUfconsume()
        this.getManagerAccount()
        this.getFindExchangeRatese()
        this.getGeneralView()
      }
    }
  },
  mounted() {
    if(this.$route.query.recharge && this.$route.query.TradeNo) {
      this.getOrderInfo()
    }
    this.getFreezeUblance()
    this.getuTotalAmount()
    this.getFindSumUfc()
    this.getFindDayUfconsume()
    this.getFindOneUserUfconsume()
    this.getManagerAccount()
    this.getFindExchangeRatese()
    this.getGeneralView()
    this.getCampaignTotal()
    // this.getTrendSumUfc()
  },
  created() {
    // this.fetchData()
  },
  methods: {
    // 消耗概览
    getFindUserUfconsumeDetails(id) {
      this.id = id
      this.XHGLdialogVisible = true
      this.$forceUpdate()
    },
    // 消耗趋势数据
    async getGeneralView() {
      let data = {
        type: this.isType,
        campaign_id: '',
        teamId: this.teamId
      }
      const res = await generalView(data)
      if (res.data.code === 20000) {
        res.data.data.list.forEach(item => {
          if (item.campaign_name.indexOf('_3YData_') !== -1) {
              let str = item.campaign_name
              let first = str.indexOf('_') + 1
              let gang = str.indexOf('_', first)
              item.campaign_name = str.substring(gang).substring(1,str.length)
            }
        })
        this.glData = res.data.data.list
      }
      else return this.$message.error(res.data.message)
    },
    // 应付金额
    async onToPlay(params){
      let data = ''
      this.onPlayMoney = ''
      if (params === 'cz') {
        data={
          amount: this.czForm.recharge || 0,
          type: this.isType,
          channel: 'recharge',
          teamId: this.teamId
        }
      }else {
        data={
          amount: this.txForm.amount || 0,
          type: this.isType,
          channel: 'withdraw',
          teamId: this.teamId
        }
      }
      const res = await onPlay(data)
      if(res.data.code === 20000) {
        this.onPlayMoney = res.data.data
      } else if (res.data.code === 20001) {
        this.czForm.recharge = 0
        this.onPlayMoney = 0
        return true
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message)
        this.onPlayMoney = res.data.data
      }
    },
    // 汇率
    async getFindExchangeRatese() {
      let data = {
        teamId: this.teamId
      }
      const res = await findExchangeRates(data)
      if (res.data.code === 20000) return this.rate = res.data.data.rate
      else return
    },
    timeChange(data) {
      this.timeArray = data
    },
    // 获取账号管理员
    async getManagerAccount(){
      let data = {
        teamId: this.teamId
      }
      const res = await managerAccount(data)
      if(res.data.code === 20000) return this.managerTel = res.data.data
      else return false
    },
    // 查询冻结余额
    async getFreezeUblance() {
      let data = {
        type: this.isType,
        teamId: this.teamId
      }
      const res = await freezeUblance(data)
      if (res.data.code === 20000) {
        this.money = res.data.data
      }
      else this.$message.error('查询冻结余额失败')
    },
    // 查询用户充值总额
    async getuTotalAmount() {
       let data = {
        type: this.isType,
        teamId: this.teamId
      }
      const res = await uTotalAmount(data)
      if (res.data.code === 20000) {
        this.TotalAmount = res.data.data.TotalAmount
        this.TotalAmountData = res.data.data.createAt
      }
      else return this.$message.error('查询用户充值金额失败')
    },
    // 消耗占比
    async getFindSumUfc() {
       let data = {
        type: this.isType,
        teamId: this.teamId
      }
      const res = await findSumUfc(data)
      if (res.data.code === 20000) return this.ybalanceofconsumption = res.data.data[0].round
      else return this.$message.error('查询消耗占比失败')
    },
    //昨日消费总额
    async getFindDayUfconsume() {
      let data = {
        type: this.isType,
        teamId: this.teamId
      }
      const res = await findDayUfconsume(data)
      if (res.data.code === 20000) return this.balanceofconsumption = res.data.data ? res.data.data.balanceofconsumption : 0
      else return this.$message.error('查询昨日消费总额失败')
    },
    // 累计消耗
    async getFindOneUserUfconsume() {
      let data = {
        type: this.isType,
        teamId: this.teamId
      }
      const res = await findOneUserUfconsume(data)
      if(res.data.code === 20000) {
        this.balanceofconsumptions = res.data.data ? res.data.data.balanceofconsumption : 0
        this.balanceofconsumptionsData = res.data.data.createAt
      }
      else return  this.$message.error('查询累计消耗失败')
    },
    // 图表数据显示
    async getCampaignTotal() {
      let data = {
        startTime: this.timeArray[0],
        endTime: this.timeArray[1],
        type: this.isType,
        campaign_id: '',
        teamId: this.teamId
      }
      this.qsXData = []
      this.qsYData = []
      const res = await campaignTotal(data)
      if(res.data.code === 20000) {
        let value = res.data.data
        let qsXData = []
        let  qsYData = []
        for(let k in value) {
         let data = value[k]
          qsXData.push(k)
          qsYData.push(data)
        }
        this.qsXData = qsXData
        this.qsYData = qsYData
      }
    },
    async getTrendSumUfc(value) {
      let data = {
        startTime: value[0],
        endTime: value[1],
        type: this.isType,
        teamId: this.teamId
      }
      const res = await trendSumUfc(data)
      if(res.data.code === 20000) return
    },
      // 广告系列统计
    async getCampaignStatistics(value) {
      this.zbData = []
      this.zbName = []
      this.xData = []
      let data = {
        endTime: value[1],
        startTime: value[0],
        type: this.isType,
        campaign_id: '',
        teamId: this.teamId
      }
      const res = await campaignStatistics(data)
      if(res.data.code === 20000) {
        res.data.data.forEach(item => {
          if(item.value > 0){
            this.zbName.push(item.name)
            this.zbData.push(item.value)
            this.xData.push(item)
          }
        })
        this.allNumber = 0
        for(let i=0;i<this.zbData.length; i++) {
          this.allNumber = this.allNumber+this.zbData[i]
        }
      }
    },
    // 支付宝手动充值
    CZDialog() {
      this.czForm = {}
      this.isDisable = false
      this.CZdialogVisible=true
      this.getFindExchangeRatese()
    },
    onAlipay(form) {
      this.$refs[form].validate(async valid => {
        if(valid) {
          let data ={
            url: encodeURIComponent(window.location.href + '?'),
            Recharge: this.czForm.recharge,
            type: this.isType,
            teamId: this.teamId
          }
          this.isDisable = true
          const res = await alipay(data)
          if(res.data.code === 20000) {
            this.isDisable = true
            this.CZdialogVisible = false
            this.$forceUpdate()
            const div = document.createElement('div')
            const idName = 'aliPayForm' + new Date().getTime()
            div.id = idName
            div.innerHTML = res.data.data
            document.body.appendChild(div)
            const aliPayFormBox = document.querySelector('#' + idName + ' form')
            aliPayFormBox.submit()
          } else {
            this.$message.error(res.data.message || '充值失败')
          }
        }
      })
    },
    // 获取订单信息
    async getOrderInfo() {
      const obj = {
        orderid: this.$route.query.orderid,
        teamId: this.teamId
      }
      const res = await getOrderInfo(obj)
      if (res.data.data && res.data.code === 20000) {
        this.orderInfo = res.data.data
        this.zfdialogVisible = true
      } else {
        this.$message.closeAll()
        this.$message.error(res.data.message || '获取支付订单失败，请稍候重试')
      }
    },
    handleClose() {
      this.zfdialogVisible = false
      this.$router.replace({
        name: 'Finance'
      })
    },
    allMoney() {
      this.txForm.amount = (this.money.balance).toFixed(2)
      this.onToPlay('tx')
    },
      // 提现获取验证码
    async getCode() {
      this.$message.closeAll()
        if (!this.txForm.amount) {
          this.$message.error('请输入提现金额')
        } else if (this.txForm.amount * 1 === 0 || this.txForm.amount * 1 >50000) {
           this.$message.error('提现金额应大于0并且不能超过50000.00元')
        } else {
          let data = {
          type: "userRefund",
          teamId: this.teamId
        }
        const res = await smsRegister(data)
        if(res.data.code === 20000) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
        this.disableCode = true
        this.buttonTex = this.timeYz + 's'
        let auth_timer = setInterval(() => {
          this.timeYz --
          this.buttonTex = this.timeYz + 's'
          if(this.timeYz <= 0) {
            this.disableCode= false
            this.timeYz = 60
            this.buttonTex = '获取验证码'
            clearInterval(auth_timer)
          }
        }, 1000)
        }
    },
    // 绑定手机获取验证码
    getNewCode() {
       let reg = /^1[3456789]\d{9}$/
        if (!reg.test(this.telForm.newAccount) || !this.telForm.newAccount) return
        this.getTelCode()
        this.codeTextNew = this.timeText + 's'
        this.disabledNewShow = true
          let auth_timer = setInterval(() => {
          this.timeText--;
          this.codeTextNew = this.timeText + 's'
          if(this.timeText <= 0) {
            this.disabledShow= false
            this.timeText = 60
            this.codeTextNew = '获取验证码'
            this.disabledNewShow = false
            clearInterval(auth_timer)
            }
          }, 1000)
    },
    async getTelCode() {
      let reg = /^1[3456789]\d{9}$/
        if (!reg.test(this.telForm.newAccount)) return
        let data = {
          type: 'register',
          account: this.telForm.newAccount
        }
          const res = await smsRegister(data)
        if (res.data.code === 20000) {
            this.disabledShow = true
          this.$message.success('验证码发送成功')
        }
        else return this.$message.error(res.data.message || '验证码发送失败')
    },
     // 绑定手机
    async bindToTel() {
      let data = {
        type: 'register',
        code: this.telForm.newCode,
        mobile: this.telForm.newAccount
      }
      const res = await bindTelEmail(data)
      if (res.data.code === 20000) {
        this.$message.success('绑定手机成功')
        this.bindTelVisible = false
        this.getInfo()
      } else {
        this.$message.error(res.data.message || '绑定手机失败')
      }
    },
    TXDialog() {
      this.$message.closeAll()
      let data = this.$store.state.user.userInfo
      if (!data.mobile){
        let message = this.$message({
          dangerouslyUseHTMLString: true,
          type: 'error',
          message: `
          <div style="dispaly:flex;">请先绑定手机号
          <label style="position:absolute;right: 20px;color: #24BEBE;cursor: pointer;">去绑定</label>
          </div>`
        });
        message.$el.querySelector('label'). onclick=() => {
          this.bindTelVisible = true
        }
      } else {
        this.TXdialogVisible=true
        this.txForm.amount = ''
        this.txForm.value = ''
        this.txForm.name = ''
        this.txForm.account = ''
        this.txForm.code = ''
        this.getFindExchangeRatese()
      }
    },
    async SureTx(form) {
      this.$refs[form].validate(async valid => {
        if(valid) {
          let data = {
            amount: this.txForm.amount,
            name: this.txForm.name,
            account: this.txForm.account,
            code: this.txForm.code,
            type: this.isType,
            teamId: this.teamId
          }
          const res = await txMoney(data)
          if(res.data.code === 20000) {
            this.$message.success(res.data.message)
            this.txForm = {}
            this.TXdialogVisible = false
          }
          else {
            this.$message.error(res.data.message || '提现失败')
          }
          this.getFreezeUblance()
          this.getuTotalAmount()
          this.getFindSumUfc()
          this.getFindDayUfconsume()
          this.getFindOneUserUfconsume()
          this.getManagerAccount()
          this.getFindExchangeRatese()
          this.getGeneralView()
          this.getCampaignTotal()
        }
      })
    },
    ZfSuccess() {
      this.handleClose()
      this.zfdialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
div /deep/.el-form--label-top .el-form-item__label {
  line-height: 0px;
}
div /deep/.el-dialog__footer{
     margin-top: 0px;
}
@import "~@/styles/variables.scss";
div.process_up /deep/.el-progress-bar__inner{
  background: linear-gradient(270deg, #F4C277 0%, #FFE5BD 100%) !important;
}
div.process_down /deep/.el-progress-bar__inner{
  background: linear-gradient(270deg, #29E3C3 0%, rgba(104, 203, 186, 0.2) 100%);;
}
.header {
  width: 100%;
  // border: 1px solid red;
  height: 70px;
  position: fixed;
  // left: 0;
  margin-top: -25.7px;
  z-index: 99;
  background: #f9f9f9;
  .header_span {
    position: absolute;
    margin-top: 24px;
    // margin-left: 105px;
  }
}
.create-layout {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  position:relative;
}
.el-radio {
  border: 1px solid #fff;
}
.el-radio.is-bordered.is-checked {
  border-color: #fff;
}
.card_header {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  .header_div_one {
    width: 400px;
  }
  .header_div {
    flex: 1;
    width: 20%;
    // margin-left: 48px;
    border-left: 1px solid rgba(57, 68, 78, 0.1);
  }
  .title {
      color: rgba(51, 64, 74, 0.8);
      font-size: $mainTextFont5;
      font-family: PingFang SC !important;
      margin-left: 48px;
      display: flex;
        flex-direction: row;
      span{
        min-width: 35%;
      }
      .icon_img{
        position:absolute;
        width: 12px;
        height: 12px;
        color:#c6c6c6;
        margin-left: 8px;
        margin-top: -1px;
      }
    }
    .ye_text {
      font-size: $mainTextFont2;
      font-weight: bold;
      color: $assistTextColor3;
      margin-top: 10px;
      width: 100%;
      font-family: 'Roboto-Bold', "PingFangSC-Medium", PingFangSC, sans-serif !important;
      margin-left: 48px;
      label{
        margin-right: -5px;
      }
    }
    .end_text {
      font-size: 12px;
      color: $assistTextColor5;
      margin-top: 20px;
      margin-left: 48px;
      font-family: "PingFangSC-Regular", PingFangSC, sans-serif !important;
      label{
        margin-right: -5px;
        width: 20px;
      }
      .end_text_label {
        margin-left:5px;
        font-weight: 100;
        color:#39444E;
        font-family: "PingFangSC-Regular", PingFangSC, sans-serif !important;
      }
    }
}
.choose-time {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.chart-display {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  .chart-align {
    flex: 1;
    width:100%;
    height: 100%;
    .left_div {
      position: absolute;
      width: 50%;
      left: -15px;
      margin-top: 10px;
      background: url(../../assets/images/base/logo.png) no-repeat;
      background-size: 360px 60px;
      background-position-x: 90%;
      background-position-y: 75%;
      background-attachment: absolute;
    }
  }
}
.el-input{
  width: 60%;
}
.all_money {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  right:  41%;
  margin-top: 0px;
  cursor: pointer;
}
.aply_money{
  position:absolute;
  margin-top: -5px;
  // height: 32px
}
.aply_money_cz {
   height: 32px;
}
.apply {
  display: flex;
  flex-direction: row;
  border: 1px solid #DCDFE6;
  width: 153px;
  margin-top: 5px;
  border-radius: 2px;
  border-color: $mainColor1;
  padding: 8px 0px;
  img {
    margin-left: 10px;
    margin-right: 25px;
    width: 63px;
  }
  .item-icon {
      position: absolute;
      margin-left: 120px;
      color: $mainColor1;
      font-size: 18px;
      margin-top: 2px;
    }
}
.apply:active {
  border-color: $mainColor1;
}
.no_data {
  text-align: center;
  margin-top: 90px;
  color: #909399;
  font-size: 14px;
}
.cz_text {
  // position: absolute;
  margin-left: 10%;
}
.tx_text {
  cursor:pointer;
  // position: absolute;
  // right: 0;
  margin-left: 10%;
  font-size: 14px;
  margin-top: 7px;
  width: 30%;
}
.xh_gl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  // .xh_gl_div_one {
  //   width: 400px;
  // }
  .xh_gl_div{
    flex: 1;
    cursor: pointer;
    justify-content: flex-start;
    min-width: 250px;
    max-width: 450px;
  }
  .end_text_label {
        margin-left:5px;
        font-weight: 100;
        color:#39444E;
        font-family: "PingFangSC-Regular", PingFangSC, sans-serif !important;
        margin-right: -5px;
      }
  .xh_divder_lower {
    border-right: 1px solid #24BEBE;
    height: 5px;
    width: 1px;
    position: absolute;
    margin-left: 175px;
  }
  .xh_divder {
    border-right: 1px solid #F4C277;
    height: 5px;
    width: 1px;
    position: absolute;
    margin-left: 175px;
  }
  .xh_gl_name {
    font-size: 14px;
    color: rgba(51, 64, 74, 0.8);
    font-family: PingFang SC !important;
  }
  .xh_gl_name_next {
    font-size: 14px;
    color: rgba(51, 64, 74, 0.8);
    font-family: PingFang SC !important;
    margin-left: 20px;
  }
  .xh_gl_number{
    margin-top: 10px;
    color: #39444E;
    font-size: 24px;
    font-family: 'Roboto-Bold', "PingFangSC-Medium", PingFangSC, sans-serif !important;
    font-weight: bold;
  }
  .xh_gl_number_next{
    margin-top: 10px;
    color: #39444E;
    font-size: 24px;
    font-family: 'Roboto-Bold', "PingFangSC-Medium", PingFangSC, sans-serif !important;
    font-weight: bold;
    margin-left: 20px;
  }
  .xh_gl_progress {
    margin-top: 5px;
  }
  .xh_gl_progress_next {
    margin-top: 5px;
    margin-left: 20px;
  }
  .xh_gl_money{
    margin-top: 15px;
    color: #ACB6C2;
    font-size: 12px;
    font-family: "PingFangSC-Regular", PingFangSC, sans-serif !important;
  }
   .xh_gl_money_next{
    margin-top: 15px;
    color: #ACB6C2;
    font-size: 12px;
    font-family: "PingFangSC-Regular", PingFangSC, sans-serif !important;
    margin-left: 20px;
  }
}
.div_divider {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(57, 68, 78, 0.1);;
    margin-bottom: 20px;
    margin-top: 20px;
  }
</style>

